<html>
    <head>
        <meta charset="UTF-8">
        <!-- 引入 layui.css -->
        <link rel="stylesheet" href="layui/css/layui.css">
 
        <!-- 引入 layui.js -->
        <script src="layui/layui.js"></script>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <link type="text/css" rel="stylesheet" href="myStyle.css" />
    </head>
    <body>
        <div class="main">
<div class="top">
    <div id="assign"><span>当前用户：</span><span id="name">***</span></div>
</div>
<div class="bottom">
    <div class="left">
    <div id="users">
        <ul id="second">
           <li>用户</li>
        </ul>
    </div>
    <div>
        <ul  id="notification">
            <li>系统日志</li>
        </ul>
    </div>
    </div>
    <div class="right">
        <div class="top2"></div>
        <div class="middle2"></div>
        <div class="bottom2">
            <div><textarea id="content" rows="5" cols="50"></textarea></div>
            <div><button  onclick="send()">发送</button></div>
        </div>
    </div>
</div>
        </div>
        <script>
function  send()
{
    var content=$("#content").val();
    content+="/n/n";
    socket.send(content);
}

function  notification(abc,message)
{
var li = document.createElement("li");
var node = document.createTextNode(message);
li.appendChild(node);
 
var element = document.getElementById(abc);
element.appendChild(li);
}

function users(selector,str)
{
    $(document).ready(function(){
    $(selector).html(str);
});
}

function typeWriter(){
    if(signal===1 || message.length===0){
         return 0;
    }
    signal=1;
    if(message.length>0){
    var temp=message[0];
    var num = 0;
    var wordTimeout = null;
    var wLength = temp.length;
    var showWord = '';
    function autoWord(){
    wordTimeout = setTimeout(() => {
    showWord += temp.charAt(num);
    $(document).ready(function(){
    $(".top2").html(showWord);
    });
    num++;
    if (num < wLength) {
        autoWord();
    } else {
        window.clearTimeout(wordTimeout);
        wordTimeout = null; 
        message.splice(0,1);
        signal=0;   
    }
       }, 300);
      }
    autoWord();
    }
   }

var message=new Array();
var signal=0;
// 创建一个Socket实例
var socket = new WebSocket('ws://127.0.0.1:9090');

// 打开Socket
socket.onopen = function(event) {
    notification("notification","连接建立");
};
socket.onmessage = function(event) {
    console.log('收到消息',event.data);
    var obj=JSON.parse(event.data);
    switch(obj.sign)
{
    case "list":
        var str="";
        for(var i=0;i<obj.accountNum;i++){
        str+="<li>"+obj.accountList[i]+"</li>";
        }
        users("#second",str);
        break;
    case "name":
        users("#name",obj.assignName);
        break;
    case "accept":
    //接受消息压入数组队列中
        message.push(obj.message);
        break;
    case "sendResult":
        layui.use(['layer', 'form'], function(){
        var layer = layui.layer;
        if(obj.message==="success"){
            layer.msg('发送成功！');
        }else if(obj.message==="failure"){
            layer.msg('发送失败');
        }
        });
        break;
    case "none2":
        users("#assign","账号资源不足");
        break;
    default:
       break;
}
};

// 监听Socket的关闭
socket.onclose = function(event) {
    notification("notification","连接中断");
    users("#assign","<span>账号分配失败</span>");
    users("#second","<li>连接中断</li>");
};
//定时执行打字机函数，每隔一段时间检查队列数据
setInterval(function(){typeWriter();},3000);
//设置心跳
setInterval(function(){var result=socket.send("我是客户端的消息");console.log("心跳"+result);},5000);
        </script>
    </body>
</html>